<template>
  <div class="zyx-box">
    <div class="zyx-header">练习</div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

<!--      <div class="zyx-nav">-->
<!--        <div class="zyx-list" v-for="(item,index) in classify" :key="index" @click="toPage(item.path)">-->
<!--          <span class="imgs"><img :src='item.img'></span>-->
<!--          <span class="text">{{ item.title }}</span>-->
<!--        </div>-->
<!--      </div>-->
      <div class="zyx-nav">
        <div class="zyx-list" @click="goto">
          <span class="imgs"><img src='../../../../public/img/笔.png'></span>
          <span class="text">考点专练</span>
        </div>
        <div class="zyx-list" @click="gotos">
          <span class="imgs"><img src="../../../../public/img/名校套卷.png"></span>
          <span class="text">套卷练习</span>
        </div>
        <div class="zyx-list" @click="goto2">
          <span class="imgs"><img src="../../../../public/img/模考.png"></span>
          <span class="text">仿真模考</span>
        </div>
        <div class="zyx-list" @click="goto3">
          <span class="imgs"><img src="../../../../public/img/2.png"></span>
          <span class="text">错题练习</span>
        </div>
        <div class="zyx-list" @click="goto4">
          <span class="imgs"><img src="../../../../public/img/测评.png"></span>
          <span class="text">测评记录</span>
        </div>
        <div class="zyx-list" @click="goto5">
          <span class="imgs"><img src="../../../../public/img/1.png"></span>
          <span class="text">习题收藏</span>
        </div>
      </div>






      <section class="sim-list">
        <h1>近期模考</h1>
        <div class="sort">
          <span class="default" :class="{'active':sort==''}" @click="changeSort('')">默认排序</span>
          <span :class="{'active':sort!=''}" @click="changeSort(sort=='desc'?'asc':'desc')">
            <span style="margin-right:10px;">时间</span>
            <img src="../../../../public/img/上.png" v-if="sort=='asc'" />
            <img src="../../../../public/img/下.png" v-else-if="sort=='desc'" />
          </span>
          <div style="clear:both;"></div>
        </div>
        <div class="item">
          <div class="list" v-if="list.length>0">
            <div></div>
          </div>
          <div class="empty" v-else>
            <img src="https://wap.365msmk.com/img/empty@2x.a2fa524d.png"/>
            <div>暂无模考安排，敬请期待</div>
          </div>
        </div>
      </section>


    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  name:'',
  components: {},
  props: [],
  data() {
    return {
      isLoading:false,
      sort:'',
      list:[]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onRefresh(){
      this.isLoading = false;
    },
    goto() {
      this.$router.push({path:'/practices'});
    },
    gotos() {
      this.$router.push({path:'/PaperPackage'});
    },
    goto2() {
      this.$router.push({path:'/Exam'});
    },
    goto3() {
        if(localStorage.getItem('adminToken')){
          this.$router.push({path:'/ErrorQues'});
        }else{
              this.$router.push('/Login')
        }
    },
    goto4() {
      if(localStorage.getItem('adminToken')){
        this.$router.push({path:'/ceping'});
      }else{
        this.$router.push('/Login')
      }
    },
    goto5() {
      if(localStorage.getItem('adminToken')){
        this.$router.push({path:'/shoucang'});
      }else{
        this.$router.push('/Login')
      }
    },

    changeSort(sort) {
      this.sort = sort;
      this.$refs.list.reset();
    }
  },
};
</script>
<style lang="scss" scoped>
.zyx-box{
  width: 100%;
  height: 100vh;
  background-color:#F0F2F5;
}
.zyx-header{
  width: 100%;
  height:44px;
  background-color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 44px;
}
.zyx-nav{
  width: 90%;
  height:178px;
  background-color: #fff;
  margin: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing:border-box;
  flex-wrap: wrap;
  .zyx-list{
    width: 20%;
    margin-left: 5%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    .text{
      margin-top: 5px;
    }
    .imgs{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid gray;
      img{
        width:16px;
        height: 16px;
        margin: 10px 13px ;
      }
    }
  }
}

.active{
  color:red;
}
.actives{
  color:red;
}
.time{
  width: 45px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img{
    width: 15px;
    margin-top: 3px;
  }
}
.zyx-no{
  width: 100%;
  background-color: #fff;
  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
}

.sim-list {
  background-color: white;
  padding: 20px 40px;
  color: #8c8c8c;

  h1 {
    font-size: 4vw;
    margin-bottom: 3.86667vw;
  }
  .sort {
    font-size: 3.46667vw;
    margin-bottom: 6vw;
    > span.active {
      color: #eb6100;
    }
    > span:first-child {
      float: left;
    }
    > span:nth-child(2) {
      float: right;
    }
    img{
      width: 16px;
    }
  }
}
.empty {
  text-align: center;
  font-size: 3.2vw;
  color: #8c8c8c;
  img {
    width: 23.46667vw;
    margin-bottom: 4vw;
  }
}
</style>